<template>
	<view class="details">
		<!-- 商品图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="swiper-img" :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 价格和名称 -->
		<view class="details-goods">
			<view class="details-pprice">￥{{goodsContent.pprice}}</view>
			<view class="details-oprice"><del>原价￥{{goodsContent.oprice}}</del></view>
			<view class="details-name">{{goodsContent.content}}</view>
		</view>
		<!-- 店铺信息 -->
		<view class="shop">
			<view class="shop-left">
				<image class="shop-img" :src="shopObj.imgUrl"></image>
			</view>
			<view class="shop-right f-color">
				<view class="shop-name">{{shopObj.name}}</view>
				<view class="shop-content">店铺介绍:{{shopObj.content}}</view>
				<view class="shop-level">店铺等级:
					<view class="level-list">
						<image v-for="item in shopObj.level" :key='item' class="level-img" src="../../static/image/level.png" mode=""></image>
					</view>
				</view>
				<!-- {{shopId}} -->
			</view>
		</view>
		<!-- 商品列表 -->
		<Card cardTitle="店铺热销"></Card>
		<CommondityList  :commodityDataList="shopHotList"></CommondityList>
		<!-- 底部按钮 -->
		<view class="buttons">
			<view class="iconfont icon-gouwuche" @tap="toCart()">
				
			</view>
			<view class="addCart" @tap="showPop()">加入购物车</view>
			<view class="buy" @tap='goCart()'>立即购买</view>
		</view>
		<!-- 底部弹出层 -->
		<view class="pop" v-show="popFlag" @touchmove.stop.prevent=''>
			<!-- 蒙层 -->
			<view class="pop-mask" @tap="hidePop()">
				
			</view>
			<!-- 内容块 -->
			<view class="pop-box" :animation='animationData'>
				<view class="pop-img">
					<image :src="goodsContent.imgUrl" mode=""></image>
				</view>
				<view class="details-pprice">
					￥{{goodsContent.pprice}}
				</view>
				<view class="pop-number">
					购买数量
					<UniNumberBox :value="num" :min='1' @change="changeNumber($event)"></UniNumberBox>
				</view>
				<Lines></Lines>
				<view class="pop-sub" @tap='addCart()'>
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import $http from '@/common/api/request.js'
	import UniNumberBox from '../../components/uniapp/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import Lines from '../../components/common/Line.vue'
	import Card from '../../components/common/Card.vue'
	import CommondityList from '../../components/common/CommondityList.vue'
	export default {
		data() {
			return {
				// 商品图数据
				swiperList:[
					{imgUrl:'../../static/image/commodity1.jpg'},
					{imgUrl:'../../static/image/commodity2.jpg'},
					{imgUrl:'../../static/image/commodity3.jpg'},
					
				],
				// 商品列表图片数据
				dataList:[],
				// 控制蒙层的显示隐藏
				popFlag:false,
				// uniapp动画使用
				animationData:{},
				// 商品信息数据
				goodsContent:{},
				// 数量默认值
				num:1,
				// 店铺热销数据
				shopHotList:[],
				// 店铺信息
				shopObj:{}
			}
		},
		components:{
			Card,
			CommondityList,
			Lines,
			UniNumberBox,
		},
		 onLoad(e){
			this.getDataById(e.id)
			// console.log(JSON.stringify(this.goodsContent))

		},
		// 修改返回按钮默认事件
		onBackPress() {
			if(this.popFlag){
				this.hidePop()
				return true
			}
		},
		// 分享按钮的功能
		onNavigationBarButtonTap(e) {
			if(e.type==='share')
			uni.share({
				// 分享服务提供商
				provider:"weixin",
				// 分享类型，图文 0,
				type:0,
				// 分享到哪
				scene:'WXSceneSession',
				// 链接
				href:'192.168.0.107:8080/#/pages/details/details?id='+this.goodsContent.id+'',
				// 分享标题
				title:'您的好友向您推荐['+this.goodsContent.content+']',
				// 图片链接
				imageUrl:this.goodsContent.imgSrc,
				// 成功或者失败的回调
				success:function(res){
					console.log('success:'+JSON.stringify(res))
				},
				fail:function(err){
					console.log('fail:'+JSON.stringify(err))
				}
			})
		},
		methods: {
			...mapMutations(['addShopCart']),
			// 购买方法，直接跳转到购物车页
			goCart(){
				this.addCart(),
				this.toCart()
			},
			// 点击加入购物车中确定的方法
			addCart(){
				
				let goods=this.goodsContent
				let goodsId=goods.id
				let num=this.num
				
				$http.request({
					url:'/addcart',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded',
						token:true
					},
					data:{
						goodsId,
						num
					}
				}).then(res=>{
					this.hidePop()
					uni.showToast({
						title:res.success,
						icon:'none'
					})
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})


				// let goods=this.goodsContent;
				// this.goodsContent['checked']=false
				// this.goodsContent['num']=this.num
				// this.addShopCart(goods)
				// this.hidePop()
				// uni.showToast({
				// 	title:'该商品已加入购物车',
				// 	icon:'success'
				// })
			},
			// 跳转购物车的方法
			toCart(){
				uni.navigateTo({
					url:'../shopcart/shopcart'
				})
			},
			
			// 改变商品数量的方法
			// 一个参数不用写event，形参event对应实参value
			// 两个参数需要在形参写上$event
			changeNumber(value){
				this.num=value
			},
			// 通过id请求商品
			getDataById(id){
				$http.request({
					url:'/goods/id',
					data:{
						id
					}
				}).then(res=>{
					this.goodsContent=res[0]
					const shop_id=res[0].shop_id
					this.getShop(shop_id)
					this.getShopHot(res[0])
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 修改蒙层显示或隐藏
			showPop(){
				var animation=uni.createAnimation({
					duration:200
				})
				animation.translateY(0).step();
				this.animationData=animation.export();
				this.popFlag=true;
				setTimeout(()=>{
					animation.translateY(-500).step();
					this.animationData=animation.export();
				},200)
			},
			hidePop(){
				var animation=uni.createAnimation({
					duration:200
				})
				animation.translateY(500).step();
				this.animationData=animation.export();
				this.popFlag=true
				setTimeout(()=>{
					animation.translateY(0).step();
					this.popFlag=false
				},200)
			},
			// 获取店铺热销商品
			getShopHot(shopobj){
				const {id,type,shop_id}=shopobj
				$http.request({
					url:'/selectShopHot',
					method:"post",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						id,
						type,
						shop_id
					}
				}).then(res=>{
					this.shopHotList=res
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 获取店铺信息
			getShop(shopId){
				$http.request({
					url:'/selectShop',
					data:{
						id:shopId
					}
				}).then(res=>{
					this.shopObj=res
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
		}
	}
</script>

<style scoped>
	.details{
		padding-bottom: 120rpx;
	}
	.details-pprice{
		font-size: 40rpx;
		font-weight: bold;
		padding: 20rpx;
	}
	.details-oprice{
		font-size: 30rpx;
		color:#616161;
		padding: 20rpx;
	}
	.details-name{
		font-size: 40rpx;
		padding: 20rpx;
	}
	swiper{
		width: 100%;
		height: 700rpx;
	}
	.swiper-img{
		width: 100%;
		height:700rpx;
	}
	.details-goods{
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
		padding: 10rpx 0;
	}
	.details-img{
		width: 100%;
	}
	.buttons{
		position: fixed;
		left: 0;
		padding-bottom: 40rpx;
		bottom: 0;
		width: 100%;
		height:100rpx;
		display: flex;
		justify-content: space-around;
		background-color: #ebebeb;
	}
	.icon-gouwuche{
		display: inline-block;
		margin: 10rpx 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
		width: 70rpx;
		height: 70rpx;
		background-color: #242424;
		border-radius: 50%;
		padding: 4rpx ;
	}
	.addCart{
		display: inline-block;
		
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
		border-radius: 40rpx;
		margin: 10rpx 20rpx;
		padding: 4rpx 20rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #099404;
	}
	.buy{
		display: inline-block;
		
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
		border-radius: 40rpx;
		margin: 10rpx 20rpx;
		padding: 4rpx 20rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #00B7FF;
	}
	.pop{
		position: fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	.pop-mask{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
	}
	.pop-box{
		position: absolute;
		left: 0;
		bottom: -1000rpx;
		height: 1000rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.pop-img{
		width: 260rpx;
		height: 260rpx;
	}
	.pop-img image{
		width: 100%;
		height: 100%;
	}
	.pop-style{
		padding: 20rpx;
	}
	.pop-number{
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		padding:
	}
	.pop-sub{
		position: fixed;
		left: 0;
		bottom: 40rpx;
		display: inline-block;
		height: 120rpx;
		width: 100%;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: #00B7FF;
		color: #FFFFFF;
	}
	.shop{
		display: flex;
		width: 100vw;
		height: 160rpx;
		background-color: #eeeeee;
		padding: 20rpx;
	}
	.shop-left{
		width: 25vw;
		height: 100%;
		border-right: 2rpx solid #dcdcdc;
	}
	.shop-img{
		border: 2rpx solid #c0c0c0;
		width: 120rpx;
		height: 120rpx;
		margin: 20rpx;
	}
	.shop-right{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
		width: 75vw;
		height: 120rpx;
		font-family: '黑体';
	}
	.shop-name{
		font-size: 32rpx;
		font-weight: bold;
	}
	.shop-content{
		font-size: 28rpx;
	}
	.shop-level{
		font-size: 28rpx;
		display: flex;
	}
	.level-list{
		display: flex;
	}
	.level-img{
		width: 40rpx;
		height: 40rpx;
	}
</style>
